<template>
	<view class="typeList">
		<!-- tab -->
		<view class="tab">
			  <view class="tab_item" v-for="(item,index) in tabList" :key="item.id" @tap="switchTab(index)">
			  	    <view :class="{activeTab:index==currentTabIndex}">
			  	    	{{item.name}}
			  	    </view>
					<view class="item_icons" v-if="item.name=='销量' ||item.name=='价格' ">
						 <uni-icons :color="item.current=='up'? '#dd524d':'#fff'" type="top" size="13"></uni-icons>
						 <uni-icons :color="item.current=='down'? '#dd524d':'#fff'" type="bottom" size="13"></uni-icons>
					</view>
			  </view>
		</view>
		
		<view class="tabList">
			 <productlist :shopList='shopList' @detail='navigatorDetail' />
			 <view class="bootm_info" v-if="isBottomStatus()">
			 	--没有更多数据了--
			 </view>
		</view>
	</view>
</template>

<script>
	// api
	import {findProductList} from '@/api/home/index.js'
	
	//组件
	import productlist from '@/components/ProductList/ProductList.vue'
import { setTimeout } from 'timers';

	export default {
		data() {
			return {
				tabList:[
					{
						name:'新品',
						current:'default',
					},
					{
						name:'销量',
						current:'default',
					},
					{
						name:'价格',
						current:'default',
					},
					{

						name:'筛选',
						current:'default',
					},
				],
				currentTabIndex:0,
				isDesc:'',//升/降序
				sortBy:'',
				shopList:[],
				isBottom:false,
				pages:1,
				total:0
			};
		},
		components:{productlist},
		onLoad(option) {
			console.log(option.id);
			this.shopId=option.id;
			this.getInit();
		},
		methods:{
			//初始化
			getInit(){
				findProductList(this.pages,'6',
					{
					  categoryId: this.shopId,
					  isDesc: this.isDesc,
					  sortBy: this.sortBy
					}
				).then(res=>{
					let {data}=res.data;
					this.shopList.push(...data.rows);
					this.total=data.total;
					
					console.log(this.shopList);
				});
			},
			
			//切换tab
			switchTab(index){
				this.currentTabIndex=index;
			
				this.tabList.forEach((el,inx)=>{
					if(index==inx){
						
					}else{
						el.current='default'
					}
					
				})
				if(this.tabList[index].current=='default'){
					this.tabList[index].current='up';
					this.isDesc=1;
				}else if(this.tabList[index].current=='up'){
					this.tabList[index].current='down';
					this.isDesc=0;
				}else{
					this.tabList[index].current='up';
					this.isDesc=1;
				}
				if(index=='1'){
					this.sortBy='sale';
				}else if(index=='2'){
					this.sortBy='price';
				}else{
					this.sortBy='';
					this.isDesc='';
				}
				this.pages=1;
				this.shopList=[];
				this.getInit();
			},
			//判断底部信息显示
			isBottomStatus(){
				if(this.shopList.length==this.total){
					this.isBottom=true;
				}else{
					this.isBottom=false;
				}
				return this.isBottom
			},
			//跳转到商品详情
			navigatorDetail(val){
				uni.navigateTo({
					url:'/pages/productDetail/productDetail?id=' + val
				})
			}
		
		},
		//上拉刷新
		onPullDownRefresh() {
			    this.pages=1;
				this.shopList=[];
				this.getInit();
				uni.stopPullDownRefresh();
			
		},
		// 下拉加载
		onReachBottom() {
			
			if(this.shopList.length<this.total){
				this.pages++;
				this.getInit();
			}
		}
	}
</script>

<style lang="scss">
   .typeList{
	   .tab{
		   display: flex;
		   justify-content: space-around;
		   align-items: center;
		   padding: 20rpx 0;
		   background: #354e44;
		   color: #fff;
		   font-size: 30rpx;
		   .tab_item{
			   display: flex;
			   justify-content: center;
			   align-items: center;
			   .item_icons{
				   display: flex;
				   flex-direction: column;
				   color: #fff;
			   }
		   }
		   .activeTab{
			   color: #dd524d;
		   }
	   }
	   .tabList{
		   margin: 30rpx 30rpx 0 30rpx;
		   .bootm_info{
			   text-align: center;
			   font-size: 28rpx;
			   color: #ccc;
		   }
	   }
   }
</style>
